<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb/>
    </div>

    <div class="page-main" v-loading="state.loading"  v-if="state.card_list.is_finish==1">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header> 数据统计</template>

            <el-row :gutter="20" class="top-box">
              <top-card :btn="false" title="准入科室数" :value="state.card_list.department_count"></top-card>

              <top-card :btn="false" title="准入日间术式数" :value="state.card_list.operation_admission_count"></top-card>

              <top-card :btn="false" title="准入主刀医生数" :value="state.card_list.chief_admission_count"></top-card>

              <top-card :btn="false" title="准入患者数" :value="state.card_list.list"></top-card>
              <top-card :btn="false" title="累计完成数" :value="state.card_list.finished"></top-card>
              

            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">

        <el-col :span="8">
          <el-card shadow="hover">
            <template #header> 近15日（全院）每日日间手术预约例数</template>
            <charts-line v-if="state.card_list.book_count_list_line_x" style="height: 400px"
                         :lineData="state.card_list.book_count_list_line_x"
                         :line_x="state.card_list.book_count_list_line_data"></charts-line>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover">
            <template #header> 近15日（全院）每日日间手术完成例数</template>
            <charts-line v-if="state.card_list.finished_count_list_line_x"  style="height: 400px" :lineData="state.card_list.finished_count_list_line_x" :line_x="state.card_list.finished_count_list_line_data"></charts-line>

          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>上一个月（全院）日间患者退出率</template>
            <el-row :gutter="20" style="height:400px; display: flex;
align-items: center;
justify-content: center;">
              <el-col :span="8">
                <el-progress type="dashboard" :percentage="3.00">
                  <template #default="{ percentage }">
                    <span class="percentage-label">入院前取消率</span>
                    <span class="percentage-value">{{ state.card_list.discharge_ratio.pre_admission_cancel_count }}%</span>
                  </template>
                </el-progress>
              </el-col>
              <el-col :span="8">
                <el-progress type="dashboard" :percentage="1.00">
                  <template #default="{ percentage }">
                    <span class="percentage-label">术后退出率</span>
                    <span class="percentage-value">{{  state.card_list.discharge_ratio.finished_cancel_count }}%</span>
                  </template>
                </el-progress>

              </el-col>
              <el-col :span="8">

                <el-progress type="dashboard" :percentage="2.00">
                  <template #default="{ percentage }">
                    <span class="percentage-label">患者爽约率</span>
                    <span class="percentage-value">{{ state.card_list.discharge_ratio.absent_count }}%</span>
                  </template>
                </el-progress>
              </el-col>

            </el-row>
          </el-card>
        </el-col>
      </el-row>


      <el-row :gutter="20">

        <el-col :span="8">
          <el-card shadow="hover">
            <template #header> 各术式（累计）开展例数排名Top10</template>
            <card-list style="height: 400px" :newsList="state.card_list.operation_ranking_list"></card-list>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover">
            <template #header> 各病种（累计）开展例数排名Top10</template>
            <card-list style="height: 400px" :newsList="state.card_list.diagnosi_ranking_list"></card-list>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              各科室（累计）开展例数排名Top10
            </template>
            <card-list style="height: 400px" :newsList="state.card_list.department_ranking_list"></card-list>
          </el-card>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script setup name="qualityAssessment-overview-index">
import {getPast15Days, getPastMonth, getLastMonth,daysBetween} from '/@/utils/timeUtil.js';
import {storeToRefs} from 'pinia';
import {useRoutesList} from '/@/stores/routesList';
import TopCard from '/@/components/TopCard/topCardDashbord.vue';
import cardList from '/@/components/lists/card_list.vue';
import chartsLine from '/@/components/charts/line.vue';
import chartsPie from '/@/components/charts/pie.vue';
import ChartsLineCol from '/@/components/charts/line_col.vue';
import {applyformApi} from "/@/api/ds/apply_form";
import {dashbordApi} from "/@/api/dashbord/dashbord";
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

// 定义变量内容
const stores = useRoutesList();
const state = reactive({
  lineData: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120],
  line_x: [],
  loading:false,
  newsList: [
    {
      title: '输尿管支架管拔出术',
      subtitle: '1947例',
    },
    {
      title: '输尿管镜检测术',
      subtitle: '1947例',
    },
    {
      title: '体表肿物切除术',
      subtitle: '1947例',
    },
    {
      title: '体表肿物切除术',
      subtitle: '1947例',
    },
    {
      title: '体表肿物切除术',
      subtitle: '1947例',
    },
    {
      title: '体表肿物切除术',
      subtitle: '1947例',
    },


  ],

  card_list: {
    is_finish:0,
  },
});

// 页面加载时
onMounted(() => {
  getData()
});

const getData = () => {
  state.loading = true
  const day_15 = getPast15Days();
  const day_month = getLastMonth();
  const searchParam = {
    "operation_book_start_time": day_15['startDate'],
    "operation_book_end_time": day_15['endDate'],
    "operation_finished_start_time": day_15['startDate'],
    "operation_finished_end_time": day_15['endDate'],
    "discharge_start_time": day_month['startDate'],
    "discharge_end_time": day_month['endDate'],
  }
  dashbordApi().getDashbord(searchParam).then(res => {
    state.card_list = res.data
    state.card_list.is_finish =1
    state.card_list['book_count_list_line_x'] = Object.values(state.card_list.book_count_list)
    state.card_list['book_count_list_line_data'] = Object.keys(state.card_list.book_count_list)


    state.card_list['finished_count_list_line_x'] = Object.values(state.card_list.finished_count_list)
    state.card_list['finished_count_list_line_data'] = Object.keys(state.card_list.finished_count_list)


    //获取前10


    state.card_list['operation_ranking_list'] = state.card_list.operation_ranking.map((item,index)=>{
      return {
        title:item.name,
        subtitle:item.patientRecordActualOperationCount+'例',
      }
    }).slice(0,10)
    state.card_list['diagnosi_ranking_list'] = state.card_list.diagnosi_ranking.map((item,index)=>{
      return {
        title:item.name,
        subtitle:item.patientRecordActualOperationCount+'例',
      }
    }).slice(0,10)
    state.card_list['department_ranking_list'] = state.card_list.department_ranking.map((item,index)=>{
      return {
        title:item.departmentName,
        subtitle:item.patientRecordActualOperationCount+'例',
      }
    }).slice(0,10)
    state.loading = false

    console.log(state.card_list)
  })
}
</script>

<style lang="scss" scoped>

:deep() .el-row:not(:first-child) {
  margin-top: 15px;
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}

.demo-progress .el-progress--circle {
  margin-right: 15px;
}

.top-box{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 20px;
}
</style>
